<template>
  <el-table :data="appObject.tableData" border style="width: 100%" v-loading="appObject.loading">
    <el-table-column prop="userName" label="姓名" />
    <el-table-column prop="dept" label="部门" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="showRemoveDialog(scope.$index, scope.row)">移出WG</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 移除前弹出消息确认框 -->
  <el-dialog v-model="appObject.dialogVisible" title="移除" width="30%">
    <span>{{appObject.dialogTitle}}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="appObject.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRemove()">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  import wgStore from '../store/wg.js'
  import {
    storeToRefs
  } from 'pinia'

  import {
    getWGUserById,
    delMember
  } from '../http/wgApi.js'

  const appObject = reactive({
    tableData: [],
    dialogVisible: false,
    dialogTitle: '',
    removeUserId: 0,
    loading: false
  })

  const wStore = wgStore()
  const {
    wgId
  } = storeToRefs(wStore)

  const initData = () => {
    getWGUserById(wStore.getWgId).then(res => {
      res = res.data
      appObject.tableData = res.data
    })
  }
  initData()

  const showRemoveDialog = (index, row) => {
    appObject.dialogVisible = true
    appObject.dialogTitle = "确定将" + row.userName + "移除WG吗？"
    appObject.removeUserId = row.assignId
  }
  
  const handleRemove = () => {
    appObject.dialogVisible = false
    
    delMember({
      assignId: appObject.removeUserId,
      wgId: wStore.getWgId
    }).then(res => {
      initData()
    })
  }
</script>

<style scoped>
</style>
